<template>
  <div class="setting">
    <van-nav-bar title="设置" left-arrow @click-left="goBack" />
    <div class="itemsBox">
      <div class="itemBox">
        <div class="leftTitle">账号ID</div>
        <div class="rightInfo">1231231231</div>
      </div>
    </div>

    <div class="itemsBox">
      <div class="itemBox">
        <div class="leftTitle">登录密码</div>
        <div class="rightInfo">
          修改
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="itemBox">
        <div class="leftTitle">安全密码</div>
        <div class="rightInfo">
          未设置
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="itemsBox">
      <div class="itemBox">
        <div class="leftTitle">软件版本</div>
        <div class="rightInfo">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="itemBox">
        <div class="leftTitle">隐私政策</div>
        <div class="rightInfo">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="itemBox">
        <div class="leftTitle">用户协议</div>
        <div class="rightInfo">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="itemBox">
        <div class="leftTitle">意见反馈</div>
        <div class="rightInfo">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="itemsBox">
      <div class="itemBox">
        <div class="leftTitle">清理缓存</div>
        <div class="rightInfo">0.1KB</div>
      </div>
    </div>
    <div class="itemsBox" @click="cancellation">
      <div class="itemBox">
        <div class="leftTitle">注销账号</div>
        <div class="rightInfo">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <div class="logout" @click="logout(0)">退出登录</div>
    <van-action-sheet
      v-model="confirmShow"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="logout(1)"
      @cancel="onCancel"
      description="是否退出卖座电影"
    />
  </div>
</template>

<script>
import { NavBar, Icon, Dialog, ActionSheet } from "vant";
import Vue from "vue";
Vue.use(NavBar).use(Icon).use(Dialog).use(ActionSheet);
import { mapMutations } from "vuex";
import http from "@/utils/http";
export default {
  data() {
    return {
      confirmShow: false,
      actions: [
        {
          name: "退出",
          color: "#ee0a24",
        },
      ],
    };
  },
  methods: {
    ...mapMutations("tabBarModule", ["hideTB", "showTB"]),
    goBack() {
      this.$router.go(-1);
    },
    cancellation() {
      Dialog.alert({
        message:
          "若你需要注销账号，请联系在线客服或拨打人工客服（4001808400），并自愿放弃你账号内的所有虚拟资产，收到申请后，客服将会在15个工作日内完成注销。",
      }).then(() => {});
    },
    logout(flag) {
      if (flag == 0) {
        this.confirmShow = true;
      } else {
        console.log(111);
        http({
          method: "GET",
          url: "/gateway",
          headers: {
            "X-Host": "mall.user.info.get",
          },
        }).then((res) => {
          console.log(res);
          sessionStorage.clear();
          this.$router.push("/login");
        });
      }
    },
    onCancel() {
      this.confirmShow = false;
    },
  },
  mounted() {
    this.hideTB();
  },
  beforeDestroy() {
    this.showTB();
  },
};
</script>

<style lang='scss' scoped>
.setting {
  background-color: #f4f4f4;
  height: 100%;
  .van-nav-bar {
    /deep/ .van-icon {
      color: #222;
    }
  }
  .itemsBox {
    margin: 10px 0;
    .itemBox {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 0 20px;
      color: #222;
      .rightInfo {
        line-height: 50px;
        color: #aaa;
        font-size: 14px;
        i {
          font-size: 12px;
        }
      }
    }
  }
  .logout {
    height: 50px;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
    color: red;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>